<template>
  <div>
    <!-- 头部导航  -->
    <van-nav-bar
      title="地址"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
    <van-popup
      teleport="#app"
      v-model:show="show"
      position="bottom"
      :style="{ height: '70%' }"
    >
      <van-address-edit
        v-if="type === 1"
        :area-list="areaList"
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @change-detail="onChangeDetail"
      />
      <van-address-edit
        v-else
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :address-info="address_info"
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="amend"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { address, getAddress, ressUpdate, ressDelete } from "../server/user.js";
export default {
  data() {
    return {
      type: 0,
      areaList: areaList,
      show: false,
      chosenAddressId: 1,
      searchResult: [],
      list: [],
      address_info: {},
      disabledList: [
        {
          id: "3",
          name: "王五",
          tel: "1320000000",
          address: "浙江省杭州市滨江区江南大道 15 号",
        },
      ],
    };
  },

  created() {
    // 首次加载获取地址数据
    this.getList();
  },

  computed: {
    // 获取用户 id
    getuserid() {
      return this.$store.state.userid;
    },
  },
  methods: {
    // 添加按钮
    onAdd() {
      this.type = 1;
      this.show = true;
    },
    //获取地址数据
    getList() {
      getAddress({ userid: this.getuserid }).then((res) => {
        console.log(res);
        this.list = res.data.map((item) => {
          return {
            id: item.userid,
            name: item.name,
            tel: item.tel,
            addressDetail: item.addressDetail,
            address:
              item.province + item.city + item.county + item.addressDetail,
            isDefault: item.isDefault,
            city: item.city,
            county: item.county,
            province: item.province,
          };
        });
      });
    },
    // 编辑地址
    onEdit(item, index) {
      this.type = 2;
      this.show = true;
      this.address_info = {
        id: item.id,
        name: item.name,
        tel: item.tel,
        province: item.province,
        city: item.city,
        addressDetail: item.addressDetail,
        isDefault: item.isDefault,
      };
    },
    // 确认添加地址
    onSave(info) {
      console.log(info);
      address({
        userid: this.getuserid,
        name: info.name,
        tel: info.tel,
        province: info.province,
        city: info.city,
        county: info.county,
        county: info.county,
        addressDetail: info.addressDetail,
        isDefault: info.isDefault,
        areaCode: info.areaCode,
      }).then((res) => {
        this.show = false;
        this.getList();
      });
    },
    // 删除按钮
    onDelete(item) {
      ressDelete({ addressid: item.id }).then((res) => {
        if (res.code === "200") {
          this.getList();
          this.show = false;
        }
      });
    },
    // 确认修改数据
    amend(item) {
      console.log(item);
      ressUpdate({
        addressid: item.id,
        userid: this.getuserid,
        name: item.name,
        tel: item.tel,
        province: item.province,
        city: item.city,
        county: item.county,
        country: item.country,
        addressDetail: item.addressDetail,
        isDefault: item.isDefault,
      }).then((res) => {
        this.show = false;
        this.getList();
      });
    },
    // 重置数据
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "chuan",
            address: "杭州西湖",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
